<template>
  <el-card shadow="always" class="form-container dark">
    <el-form :model="formData" :rules="rules" ref="formRef">
      <el-form-item prop="name" class="form-item">
        <el-input v-model="formData.name" placeholder="Please input">
          <template #prefix>
            <el-icon>
              <User />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="pass" class="form-item">
        <el-input v-model="formData.pass" type="password" placeholder="Please input">
          <template #prefix>
            <el-icon>
              <Lock />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item class="form-item">
        <el-button @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { mapActions } from 'pinia'

import { useAdminStore } from '../stores/admin-store'

import { login } from '../services/index'

// element-plus 全局引用，指的是在 template 里面可以随时使用
// 但是 在 script 里还是需要 import 一下
import { ElMessage } from 'element-plus'
export default {
  data() {
    return {
      formData: {
        name: '',
        pass: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // {
          //   // 这个验证用来举例，可以使用内置的 mix/max 规则实现
          //   validator: (rule, value, callback) => {
          //     if (value.length < 4) {
          //       // callback 传 error 表示不通过
          //       callback(new Error('用户名长度不能小于 4'))
          //     } else if (value.length > 10) {
          //       callback(new Error('用户名长度不能超过 10'))
          //     } else {
          //       // callback 不传参数，表示通过
          //       callback()
          //     }
          //  }, trigger: 'blur' }
        ],
        pass: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    ...mapActions(useAdminStore, ['setAdminname']),
    login() {
      // 主动调用验证方法
      this.$refs.formRef.validate( async(valid, fields) => { 
        // valid 是否验证通过
        // fields 哪些字段没有过
        if (valid) {
          console.log('验证通过')
          console.log(this.formData)
          // 发送登录 ajax
      let result=  await  login({
            adminname: this.formData.name,
            password: this.formData.pass
          })
            if (result.data.code === '200') {
              // console.log(result);
              // ElMessage({
              //   message: '登录成功',
              //   type: 'success',
              // })
              ElMessage.success('登录成功')

              // 将 token 存在 localStorage 里
              localStorage.setItem('token', result.data.data.token)
              // /admin/detail 这个接口需要传 adminname
              localStorage.setItem('adminname', result.data.data.adminname)

              // 设置 adminname
              this.setAdminname(result.data.data.adminname)

              this.$router.push('/admin')
            }
          
        } else {
          console.log('验证不通过')
        }
      })
    }
  }
}
</script>
<style scoped>
.form-container {
  width: 300px;
  margin: 100px auto auto;
}
.form-item {
  margin-bottom: 30px;
}
.form-item:last-child {
  margin-bottom: 0;
}
</style>